<template>
	<view class="hui b_width">
		<u-navbar leftIconColor="#fff" :autoBack="true" :title="title" titleStyle="color:#fff" :placeholder="true"
			bgColor="#3C7CFF">
		</u-navbar>
		<view class="search_box b_flex_c_s">
			<view class="b_flex_c input_box">
				<image class="search" mode="widthFix" src="@/static/img/shop/search.png"></image>
				<input placeholder-style="color:#B5B5B5;font-size:32rpx" placeholder="搜索您需要的商品" />
			</view>
			<!-- <view class="sousuo">搜索</view> -->
		</view>
		<view class="b_flex goods_box">
			<scroll-view scroll-y="true" class="goods_scroll left" :show-scrollbar="false">
				<view class="">
					<view @click="setItem(item)" :class="['b_flex_cc','item',cateCheck.id==item.id?'i_check':'']"
						v-for="(item,index) in cate" :key="index">
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view class="right">
				<scroll-view scroll-x="true" class="search_scroll" :show-scrollbar="false" v-if="(child&&!emptyShow)||!cateCheck.id">
					<view class="b_flex_c">
						<view @click="setChild(item)" :class="['child',item.id==childCheck.id?'childc':'']"
							v-for="(item,index) in child" :key="index">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="tc" v-if="child"></view>
				<scroll-view scroll-y="true" :show-scrollbar="false" class="goods_scroll" v-if="!emptyShow">
					<view v-if="!emptyShow" class="b_flex_c ginfo" v-for="(item,index) in list" :key="index">
						<image class="gimg" :src="item.image" @click="toInfo(item)"></image>
						<view class="cinfo">
							<view class="mb" @click="toInfo(item)">{{item.storeName}}</view>
							<view class="msg yc_one mb" @click="toInfo(item)">{{item.storeName}}</view>
							<view class="b_flex_c_s pbox">
								<view @click="toInfo(item)">¥ {{item.price}}<text class="unit">/{{item.unitName}}</text></view>
								<view @click="setCar(item)">
									<u-icon name="plus-circle-fill" color="#FF7133" size="22.2"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<empty v-if="emptyShow" text="暂无商品"></empty>
			</view>
		</view>

      <view class="car_tc"></view>
      <view class="car_box" @click="$project.toPath('/pages/shop/car')">
		  <view class="car b_flex_c">
			  <view class="b_flex_c car_left">
				   <u-icon name="shopping-cart" size="32"></u-icon>
				   <view class="buyNum" v-if="buyNum">{{buyNum}}</view>
			  </view>
			<view class="pbox car_price">¥ {{price}}</view>
			  <view class="btn">去结算</view>
		  </view>
		
	  </view>
        
	</view>
</template>

<script>
	import Bootm from "@/components/bottom.vue";
	import empty from "@/components/empty.vue";
	import {
		goodsCate,
		goodsList,
		addCar,
		carNum,
		carList
	} from "@/require/api.js";
	export default {
		components: {
			Bootm,
			empty
		},
		data() {
			return {
				cateCheck: {
					id: '',
					child: ''
				},
				cate: [],
				child: '',
				childCheck: {
					id: ''
				},
				title: '',
				id: '',
				params: {
					page: 1,
					limit: 10,
					cid: ''
				},
				list: [],
				emptyShow: false,
				total: '',
				buyNum:'',
				price:''
			}
		},
		onLoad(data) {
			if (data.title) {
				this.title = data.title;
			}
			if (data.id) {
				this.id = data.id;
			}
			this.getCate();
			this.getList();
		},
		onShow() {
			
			//this.getNum();
			this.getCarList();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.params.page++;
				goodsList(this.params).then(res => {
					res.data.list.forEach((res) => {
						this.list.push(res);
					});
				});
			}
		},
		methods: {
			async getCarList(){
			let {data}=await carList({isValid:true,page:1,limit:99999});
			   if(data.list){
				   let money=0;
				   data.list.forEach(res=>{
					   money+=Number(res.price)*res.cartNum
				   });
				   this.price=money;
			   }
			   this.buyNum=data.total;
			},
			async getNum() {
				let {
					data
				} = await carNum({
					numType: true,
					type: 'total'
				});
				this.buyNum = data.count;
			},
			toInfo(e){
			  this.$project.toPath('/pages/shop/info?id='+e.id);  	
			},
			async setCar(e){
			 let {code,message}=await addCar({cartNum:1,productId:e.id,productAttrUnique:e.productValue[e.productAttr[0].attrValues].id});
			 if(code==200){
				 this.$project.toast('加入购物车成功');
				 this.getCarList();
			 }
			},
			setChild(e) {
				this.childCheck = e;
				this.params.cid = e.id;
				this.getList();
			},
			setItem(e) {
				this.child = '';
				this.cateCheck = e;
				if (e.child) {
					
					this.childCheck.id = e.id;

					this.child = JSON.parse(JSON.stringify(e.child));
					this.child.unshift({
						id: e.id,
						name: '全部'
					});
				} else {
					
					if(e.id){
						this.child = [{id:e.id,name:'全部'}];
					}else{
						this.childCheck.id = e.id;
						
						this.child = JSON.parse(JSON.stringify(this.cate));
						
					}
				}
				this.params.cid = e.id;
				this.getList();
			},
			async getCate() {
				let {
					data
				} = await goodsCate();
				data.unshift({
					id: '',
					name: '全部'
				});
				this.cate = data;
				this.childCheck.id = '';
				this.child = JSON.parse(JSON.stringify(this.cate));
			},
			async getList() {
				this.params.page = 1;
				let {
					data
				} = await goodsList(this.params);
				if (data.list.length < 1 || !data.list) {
					this.emptyShow = true;
				} else {
					this.emptyShow = false;
				}
				this.list = data.list;
				this.total = data.total;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content__title {
		font-size: 32rpx !important;
		font-weight: bold;

	}

	.search_box {
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.search {
		width: 30rpx;
		margin-right: 10rpx;
	}

	.input_box {
		width: 100%;
		height: 70rpx;
		background: #EDEDED;
		border-radius: 34rpx;
		line-height: 70rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
	}

	.sousuo {
		color: #252B50;
		font-weight: bold;
	}

	.goods_box {
		box-sizing: border-box;
		padding: 0 0 0 0;
	}

	.left {
		width: 28%;
	}

	.right {
		position: relative;
		width: 72%;
		box-sizing: border-box;
		padding: 0 20rpx 0 25rpx;
		background-color: #fff;
	}

	.goods_scroll {
		height: calc(100vh - 478rpx);
	}
	

	.item {
		width: 100%;
		text-align: center;
		color: black;
		border-left: 10rpx solid transparent;
		font-size: 26rpx;
	}

	.name {
		box-sizing: border-box;
		padding: 30rpx 0;
	}

	.i_check {
		background-color: #fff;
		color: #F97240;
		border-left: 10rpx solid #F97240;
	}

	.gimg {
		width: 36%;
		height: 180rpx;
		border-radius: 15rpx;
		margin-right: 4%;
	}

	.cinfo {
		width: 60%;
		font-size: 26rpx;
		font-weight: 500;
	}

	.msg {
		color: #999;
		font-size: 24rpx;
	}

	.pbox {
		font-size: 36rpx;
		color: #F01D1D;
	}

	.unit {
		font-size: 22rpx;
		color: #999;
	}

	.mb {
		margin-bottom: 15rpx;
	}

	.ginfo {
		box-sizing: border-box;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.search_scroll {
		width: 100%;
		position: absolute;
		left: 25rpx;
		top: 0;
	}
	

	.child {
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		margin-right: 20rpx;
		background: #eee;
		font-size: 22rpx;
		border-radius: 10rpx;
		color: #999;
	}

	.childc {
		color: #FF7133;
		background: #FFF2EE;
	}

	.tc {
		height: 48rpx;
	}
	.car_box{
		position: fixed;
		bottom: 0;
		left:0;
		width: 100%;
		background-color: #F3F3F3;
	}
	.car{
		width: 80%;
		margin: 45rpx auto;
		background-color: white;
		border-radius: 25rpx;
		box-sizing: border-box;
		padding: 8rpx 30rpx;
	}
	.car_tc{
		//height: 168rpx;
	}
	.btn{
		background-color: #FF7133;
		color: white;
		font-size: 32rpx;
		box-sizing: border-box;
		padding: 15rpx 50rpx;
		border-radius: 50rpx;
		margin-left: auto;
	}
	.car_left{
		position: relative;
		margin-right: 20rpx;
	}
	.buyNum {
		text-align: center;
		position: absolute;
		right: 0rpx;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 14rpx;
		font-size: bold;
		border-radius: 50%;
		background: #FF7133;
		color: white;
	}
	.car_price{
		font-size: 32rpx;
	}
</style>